import styled from "@emotion/styled"
import { useModalSlideUp } from "@/features/useModal"
import NewsDetails from "./Popup/NewsDetails"
import { useCallback, useMemo } from "react"
import ModalSlideUp from "@/components/composite/ModalSlideUp/main"
import { SvgComponent } from "@/components/base/Svg"

const NewsListContainer = styled.div`
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 12rem;
    padding-right: 12rem;
`

const NewsItemContent = styled.div`
    border-radius: 8rem;
    background-color: #fcfcfd;
`

const NewsItemTime = styled.div`
    font-family: "Gilroy";
    font-weight: 400;
    font-size: 12rem;
    padding: 8rem 12rem;
    letter-spacing: 0%;
    vertical-align: middle;
    text-transform: capitalize;
`

const NewsItemTitle = styled.div`
    font-family: "Gilroy";
    font-weight: 500;
    font-size: 14rem;
    letter-spacing: 0%;
    vertical-align: middle;
    text-transform: capitalize;
    padding: 0 12rem 12rem;
`

const NewsItemText = styled.div`
    font-family: "Gilroy";
    font-weight: 400;
    font-size: 12rem;
    letter-spacing: 0%;
    vertical-align: middle;
    text-transform: capitalize;
    padding: 0 12rem;
`
const NewsItemDetail = styled.div`
    font-family: "Gilroy";
    font-weight: 400;
    font-size: 12rem;
    padding-right: 12rem;
    padding-bottom: 8rem;
    padding-top: 8rem;
    letter-spacing: 0%;
    text-align: right;
    vertical-align: middle;
    text-transform: capitalize;
    color: #054bf0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
`

const NewsRightIcon = styled(SvgComponent("pages/UserCenterPage/blue_right_arrow.svg"))`
    width: 16rem;
    height: 16rem;
    margin-left: 4rem;
`
export default function NewsList() {
    const { open: openModal } = useModalSlideUp("account-page")

    const handleOpenModal = useCallback(() => {
        openModal(<NewsDetails />, {
            closeOnClickMask: false,
            closeOnEscape: false,
        })
    }, [openModal])
    return (
        <NewsListContainer>
            <NewsItemContent>
                <NewsItemTime>Sun | 9.22.2024 | 1:O0 PM</NewsItemTime>
                <NewsItemTitle>
                    PAGCOR unveils modern socio-civic center in Dasmarinas City
                </NewsItemTitle>
                <NewsItemText>
                    DASMARIÑAS CITY, Cavite – The Philippine Amusement and Gaming Corporation
                    (PAGCOR) inaugurated here Wednesday, Septembe...
                </NewsItemText>
                <NewsItemDetail onClick={handleOpenModal}>
                    Detail
                    <NewsRightIcon />
                </NewsItemDetail>
            </NewsItemContent>
            <ModalSlideUp familyName="account-page" />
        </NewsListContainer>
    )
}
